<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>选择器</title>
        <style>
            /*
            统配选择器 匹配任意元素
            */
            *{

            }
            /*元素（标签）选择器 */
            /*选中也变中的所有div*/
            div{
                background-color: red;
            }
            /* id选择器 id 选择器唯一 不能重复*/
            #box{
                width: 300px;
            }
            /*类选择器*/
            .blue {
                background-color: blue;
            }
            /*选中class中包含blue的p标签*/
            p.blue{
                width: 300px;
            }

            /*选中p标签并且class中包含a 和blue*/
            p.a.blue{
                height: 200px;
            }

            /*子代选择器*/
            .b>span{
                background-color: yellow;
            }
            /*后代选择器*/
            .b span{
                background-color: orange;
            }
            /*群组选择器*/
            p,div,span{
                border: 2px solid black;
            }

            /*相邻兄弟选择器*/
            div+span{
                color: pink;
            }
        </style>

    </head>

    <body>
        <div>11</div>

        <div id="box" class="blue">22</div>

        <!--类名可以有多个 多个值之间用空格隔开-->
        <p class="blue a">33</p>

        <div class="blue">44</div>

        <div>55</div>

        <p>55</p>

        <div class="b">
            大家 <span>新年快乐</span>
            <div>
                <span>hello</span>,world
            </div>
        </div>

        <p>
            今天 <span>天气不错</span>
        </p>


        <div>我是div</div>
        <span>呵呵哒</span>
        <span>么么哒</span>

        <div>我是div2</div>
        <span>老铁</span>
        <span>双击666</span>


    </body>
</html>